<template>
	<view class="content-box center-flex flex-cloumn hasBK" :class="returnRes?'hasReturnRes':''">
		<view class="getAnswer" style="margin-top: 200rpx;">
			<text style="height: 75rpx;margin:150rpx 0 50rpx;color: #aaa;font-size: 50rpx;">心中默念你的问题</text>
			<match-media :max-width="500">
				<image class="fingerPrintImage" src="../../../../static/fingerPrint.png" mode="aspectFit"
					@touchstart="touchStartButton" @touchend="touchEndButton"></image>
				<button class="answerButton">长按获取</button>
			</match-media>
		</view>
	</view>
	<view class="getAnswer" v-show="returnRes" :class="returnRes?'showResult':''">
		<text>{{returnRes}}</text>
		<button class="simple-button" style="margin-top: 40rpx;" @touchend="returnQuestion">返回</button>
	</view>
</template>

<script setup>
	import {
		inject,
		onMounted,
		ref
	} from 'vue';
	import utils from "/pages/utils/index.js"
	let isPost = ref(false);
	let returnRes = ref("");
	let touchTime = 0;
	let ENV = ref("");

	onMounted(async () => {
		ENV.value = inject("ENV")
	})
	const touchStartButton = () => {
		touchTime = new Date().getTime()
	};

	const touchEndButton = async () => {
		if (isPost) {
			let during = new Date().getTime() - touchTime
			if (during > 500) {
				isPost.value = true
				//持续按住 请求数据
				if (ENV.value === "develop") {
					returnRes.value = "开发环境测试"
					isPost.value = false
					touchTime = 0
				} else {
					utils.requestCloudDB("get", {
						collection: "ANSWER_TAB",
						whereParam: {
							index: 2
						},
						data: {},
					}, (res) => {
						isPost.value = false
						let data = res.data
						if (data && data.length != 0) {
							returnRes.value = data[0].value
						}
						touchTime = 0
					})
				}

			} else {
				// 提示请长按
			}
		}
	};

	const returnQuestion = () => {
		returnRes.value = ""
	};
</script>

<style>
	.getAnswer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hasBK {
		background: url("../../../../static/answer.jpg") no-repeat;
		background-size: contain;
		background-position: top;
		background-position-y: -60rpx;
	}

	.content-box .answerButton {
		background: none;
		height: 200rpx;
		line-height: 200rpx;
		border-radius: 30rpx;
		color: #ccc;
	}

	.content-box .answerButton::after {
		border: none;
	}

	.fingerPrintImage {
		height: 200rpx;
	}

	.hasReturnRes {
		animation-name: graduallyOut;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}

	.showResult {
		animation-name: graduallyIn;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}

	@keyframes graduallyOut {
		from {
			opacity: 1;
			height: 100%;
		}

		to {
			opacity: 0;
			height: 0;
		}
	}

	@keyframes graduallyIn {
		from {
			opacity: 0;
			height: 0;
		}

		to {
			opacity: 1;
			height: 100%;
		}
	}
</style>